import React, { useRef, useEffect } from "react";
import axios from "axios";
import { InputStyle, DivStyle, Inputa, Rotate } from "./style";
import qs from "qs";
import Amn from "./inde";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
} from "react-router-dom";
//axios.defaults.baseURL="/user/"
//axios.defaults.withCredentials=true
import {
  Form,
  Input,
  Button,
  Checkbox,
  Row,
  Col,
  Radio,
  message,
  Tabs,
} from "antd";
import ComponentStyle from "./component";
//import {FormInstance} from 'antd/lib/form'
//父组件通过this.refs获取子组件的props
//子组件通过接收父组件传过来的参数this 获取props
//父组件通过传过去回调函数 包含state 可以改变state状态
//回调函数 还可以接收子组件的参数传给父组件
//useref useeffect如果有删除就return usestate这些是函数组件
//withrouter给组件注入路由信息
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 20 },
};

const Demo = () => {};
function Bee() {
  return <div>component</div>;
}
const onFinish = (values) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const { TabPane } = Tabs;
function Bel() {
  return (
    <div>
      123
      <NavLink to="/deng">12</NavLink>
      <Router>
        <Route exact path="/deng" component={Bee}></Route>
      </Router>
      <div>children 最先渲染 component第二 render其次</div>
    </div>
  );
}
function Bst(Com) {
  return class extends React.Component {
    render() {
      return (
        <div>
          <Com />
        </div>
      );
    }
  };
}
const Comnew = Bst(Bel);
function Phone(props) {
  const form = useRef();
  const hello = "hello world";
  const open = function () {
    message.info(hello);
  };
  useEffect((x) => {
    console.log(form);
  });
  return (
    <Form ref={form}>
      <Form.Item
        label="手机号"
        name="phone"
        rules={[{ required: true, message: "输入手机号" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="验证码"
        name="yzm"
        rules={[{ required: true, message: "输入验证码" }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="submit">提交11</Button>
        <Button onClick={open}>点击2112</Button>
      </Form.Item>
      <Form.Item>
        <Comnew />
      </Form.Item>
    </Form>
  );
}
class Deng extends React.Component {
  constructor() {
    super();
    this.state = {
      url: "",
      src: [],
      input: 0,
      radio: "",
      radioValue: "1",
      checkbox: "checkbox",
      checkboxList: [],
      defalutValue: [0, 0, 0],
    };
  }

  but() {
    console.log(this.refs.form.getFieldValue("username"));
  }
  componentDidMount() {
    // axios.get("http://localhost:4000/user/details").then((x) => {
    //   console.log(x.data)
    // })
    // // axios.get("details").then((x)=>{
    // //   console.log(x.data)
    // // })
    // const data = {
    //   user: "liu",
    //   pass: "1234"
    // }
    // const header = {
    //   headers: {
    //     "Content-Type": "application/x-www-form-urlencoded"
    //   }
    // }
    // axios.post("http://localhost:4000/user/details", qs.stringify(data), header).then((x) => {
    //   console.log(x.data)
    // })
    // axios.post("details",qs.stringify(data),header).then((x)=>{
    //   console.log(x.data)
    // })
    this.state.src[0] = "http://localhost:8080/static/img/image6.jpeg";
    this.setState({
      src: this.state.src,
    });
    this.setState((state) => {
      console.log(state);
    });
  }
  change(e) {
    console.log(e.target.files[0]);
    const file = new FormData();
    file.append("img", e.target.files[0]);
    const header = {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    };
    axios.post("http://localhost:4000/user/upload", file, header).then((x) => {
      console.log(x.data);
      this.setState({
        url: x.data.url,
      });
    });
    // axios.post("upload",file,header).then((x)=>{
    //   console.log(x.data)
    //   this.setState({
    //     url:x.data.url
    //   })
    // })
  }
  input = (e) => {
    this.setState({
      input: e.target.value,
    });
  };
  raido = (e) => {
    // const { radio } = this.state
    this.setState({
      radio: "12",
    });
  };
  checkbox = (e, index) => {
    const { value } = e.target;
    const { defalutValue } = this.state;
    defalutValue[index] = Number.parseInt(value);
    console.log(defalutValue);
    this.setState({
      defalutValue: defalutValue,
    });
  };
  render() {
    // 解构state 控件表单组件 初始化
    const { input, radio, radioValue, checkbox, checkboxList, defalutValue } =
      this.state; // 对象解构
    return (
      <Row>
        123
        <ComponentStyle color={'red'}>hello world</ComponentStyle>
        <ImgList src={this.state.src} />
        <div>
          <Amn />
          <Inputa />
          <DivStyle>
            <span>12</span>
          </DivStyle>
          <InputStyle color={"green"}>
            <span>123</span>
          </InputStyle>
          <input value={input} onChange={this.input} />
          <span>value:{input}</span>
          <input
            type="radio"
            value={radioValue}
            checked={radio === "12"}
            onChange={this.raido}
          />
        </div>
        <div>
          <input
            type={checkbox}
            name={checkbox}
            checked={defalutValue[0] === 1}
            value={1}
            onChange={(e) => this.checkbox(e, 0)}
          />
          <input
            type={checkbox}
            name={checkbox}
            checked={defalutValue[1] === 2}
            value={2}
            onChange={(e) => this.checkbox(e, 1)}
          />
          <input
            type={checkbox}
            name={checkbox}
            checked={defalutValue[2] === 3}
            value={3}
            onChange={(e) => this.checkbox(e, 2)}
          />
          <span>
            checkbox:{defalutValue[0]}
            {defalutValue[1]}
            {defalutValue[2]}
          </span>
        </div>
        <Col push={6} span={6}>
          <Tabs defaultActiveKey={"b"}>
            <TabPane tab="账号登录" key="a">
              <Form ref="form">
                <Form.Item
                  label="Username"
                  name="username"
                  rules={[
                    { required: true, message: "Please input your username!" },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="Password"
                  name="password"
                  rules={[
                    { required: true, message: "Please input your password!" },
                  ]}
                >
                  <Input.Password />
                </Form.Item>
                <Form.Item
                  {...tailLayout}
                  name="remember"
                  valuePropName="checked"
                >
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                  <button onClick={this.but.bind(this)}>点击</button>
                </Form.Item>
                <Form.Item>
                  <input
                    type="file"
                    onChange={this.change.bind(this)}
                    name="file"
                  />
                  <img
                    width="100px"
                    height="100px"
                    src={this.state.url}
                    alt="加载"
                  />
                  <Radio.Group
                    defaultValue="a"
                    onChange={(x) => {
                      message.info(x.target.value);
                    }}
                  >
                    <Radio.Button value="a">beijing</Radio.Button>
                    <Radio.Button value="b">shanghai</Radio.Button>
                    <Radio.Button value="c">hangzhou</Radio.Button>
                    <Radio.Button value="d">tianjin</Radio.Button>
                  </Radio.Group>
                </Form.Item>
              </Form>
            </TabPane>
            <TabPane tab="手机登录" key="b">
              b
              <Phone />
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    );
  }
}
function ImgList(params) {
  if (params.src) {
    return (
      <div>
        {params.src.map((res) => {
          return <img src={res} key={res} width={100} height={100} />;
        })}
      </div>
    );
  } else {
    return <div>loading...</div>;
  }
}
export default Deng;
